<template>
  <div id="app">
    <div>state的数据： {{ $store.state.count }}</div>
    <div>doubleCount：{{ doubleCount }}</div>

    <HelloWorld />
    <HelloWorld />

    <button @click="onClick">修改 count</button>

    <hr />

    <div>user模块下的token: {{ $store.state.user.token }}</div>
    <div>setting模块下的name: {{ $store.state.setting.name }}</div>
    <!-- 除了 state 用 . 以外，其他的统统是 / -->
    <div>user 模块下的 getters 的 reverseToken: {{ $store.getters['user/reverseToken'] }}</div>

    <button @click="onClick2">调用 user 模块的 changeToken mutation</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  // 组件的data为啥要是一个函数呢？
  //   因为组件每次在实例化时，会调用该函数，得到一个新对象
  //   否则，如果不是函数，直接用一个对象，那所有的组件实例都会使用同一份数据对象
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    doubleCount() {
      return this.count * 2
    },
  },
  methods: {
    onClick2() {
      this.$store.dispatch('user/changeTokenAsync')
      // this.$store.commit('user/changeToken')

      // this.$store.dispatch('user/xxxx')
    },
    async onClick() {
      const res = await this.$store.dispatch('addCountAsync', 100)
      console.log(res, 'res')

      // this.$store.state.count = 100

      // // 这个 commit 专门用来调用 mutation 函数
      // const res = this.$store.commit('addCount', [2, 3, 4, 5])
      // console.log(res, 'res')
    },
  },
}
</script>
